<template>
  <el-dialog title="选择组织机构"
             v-if="showFlag"
             :visible.sync="showFlag"
             :modal=false
             width="80%"
             center
  >
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="车牌号码" prop="fdPlateNum">
          <el-input
            v-model="queryParams.fdPlateNum"
            placeholder="请输入车牌号码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="品牌型号" prop="fdBrandModel">
          <el-input
            v-model="queryParams.fdBrandModel"
            placeholder="请输入品牌型号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="发动机号码" prop="fdEngineNum">
          <el-input
            v-model="queryParams.fdEngineNum"
            placeholder="请输入发动机号码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="demoTable" highlight-current-row v-loading="loading" :data="vehicleFileList"
                @current-change="handleCurrent">
        <el-table-column width="55" align="center">
          <template v-slot="scope">
            <el-radio v-model="selectedItemId" :label="scope.row.id" @change="handleRowChange(scope.row)">{{ "" }}
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column label="主键编码" align="center" prop="id"/>
        <el-table-column label="序号" align="center" prop="fdSerialNum"/>
        <el-table-column label="组织名称" align="center" prop="fdOrganizationName"/>
        <el-table-column label="组织代码" align="center" prop="fdOrganizationCode"/>
        <el-table-column label="组织分类" align="center" prop="fdOrganizationCategory"/>
        <el-table-column label="组织层级" align="center" prop="fdOrganizationLevel"/>
        <el-table-column label="车牌号码" align="center" prop="fdPlateNum"/>
        <el-table-column label="车辆条形码" align="center" prop="fdVehicleBarcode"/>
        <el-table-column label="车辆类别名称" align="center" prop="fdVehicleCategoryName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.vehicle_class" :value="scope.row.fdVehicleCategoryName"/>
          </template>
        </el-table-column>
        <el-table-column label="车辆类型" align="center" prop="fdVehicleType">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.vehicle_type" :value="scope.row.fdVehicleType"/>
          </template>
        </el-table-column>
        <el-table-column label="控制类型名称" align="center" prop="fdControlTypeName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.control_type" :value="scope.row.fdControlTypeName"/>
          </template>
        </el-table-column>
        <el-table-column label="燃料类型名称" align="center" prop="fdFuelTypeName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.fuel_type" :value="scope.row.fdFuelTypeName"/>
          </template>
        </el-table-column>
        <el-table-column label="品牌型号" align="center" prop="fdBrandModel"/>
        <el-table-column label="制造商" align="center" prop="fdManufacturer"/>
        <el-table-column label="轴数" align="center" prop="fdAxles"/>
        <el-table-column label="排放标准" align="center" prop="fdEmiStand"/>
        <el-table-column label="载重质量" align="center" prop="fdLoadQuality"/>
        <el-table-column label="车辆容积" align="center" prop="fdVehicleVolume"/>
        <el-table-column label="厢长" align="center" prop="fdCargoLength"/>
        <el-table-column label="厢高" align="center" prop="fdCargoHeight"/>
        <el-table-column label="能耗单位" align="center" prop="fdEnergyConsumptionUnit"/>
        <el-table-column label="耗能数量" align="center" prop="fdEnergyConsumptionQty"/>
        <el-table-column label="行驶最大里程" align="center" prop="fdMaximumDrivingDistance"/>
        <el-table-column label="发动机号码" align="center" prop="fdEngineNum"/>
        <el-table-column label="购买日期" align="center" prop="fdGmrq" width="180"/>
        <el-table-column label="注册日期" align="center" prop="fdRegistDate" width="180"/>
        <el-table-column label="发证日期" align="center" prop="fdReleaseDate" width="180"/>
        <el-table-column label="年审日期" align="center" prop="fdAnnualReviewDate" width="180"/>
        <el-table-column label="强制险日期" align="center" prop="fdCompulsoryInsuranceDate" width="180"/>
        <el-table-column label="商业险日期" align="center" prop="fdCommercialInsuranceDate" width="180"/>
        <el-table-column label="货物险日期" align="center" prop="fdCargoInsuranceDate" width="180"/>
        <el-table-column label="组织关系" align="center" prop="fdOrganizationalRelationship">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.tissue_system" :value="scope.row.fdOrganizationalRelationship"/>
          </template>
        </el-table-column>
        <el-table-column label="归属单位" align="center" prop="fdAffiliatedUnit"/>
        <el-table-column label="归属单位联系人" align="center" prop="fdAffiliatedUnitContact"/>
        <el-table-column label="归属单位电话" align="center" prop="fdAffiliatedUnitphone"/>
        <el-table-column label="管理单位" align="center" prop="fdManageUnit"/>
        <el-table-column label="管理单位联系人" align="center" prop="fdManagementUnitContact"/>
        <el-table-column label="管理单位电话" align="center" prop="fdPhone"/>
        <el-table-column label="行车证照片" align="center" prop="fdRegistraPaper" width="100">
          <template slot-scope="scope">
            <image-preview :src="scope.row.fdRegistraPaper" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="车辆照片" align="center" prop="fdVehiclePhoto" width="100">
          <template slot-scope="scope">
            <image-preview :src="scope.row.fdVehiclePhoto" :width="50" :height="50"/>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmSelect">确 定</el-button>
        <el-button @click="showFlag=false">取 消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {listVehicleFile, getVehicleFile, delVehicleFile, addVehicleFile, updateVehicleFile} from "@/api/ys/vehicleFile";

export default {
  name: "vehicleSelect",
  dicts: ['tissue_system', 'vehicle_class', 'control_type', 'fuel_type', 'vehicle_type'],
  data() {
    return {
      showFlag: false,
      selectedItemId: undefined,
      selectedRows: undefined,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 组织机构管理表格数据
      vehicleFileList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fdPlateNum: null,
        fdVehicleCategoryName: null,
        fdVehicleType: null,
        fdControlTypeName: null,
        fdFuelTypeName: null,
        fdBrandModel: null,
        fdEngineNum: null,
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    show() {
      this.showFlag = true;
      this.selectedRows = {}
      this.selectedItemId = undefined
    },
    /** 查询车辆档案列表 */
    getList() {
      this.loading = true;
      listVehicleFile(this.queryParams).then(response => {
        this.vehicleFileList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        fdSerialNum: null,
        fdOrganizationName: null,
        fdOrganizationCode: null,
        fdOrganizationCategory: null,
        fdOrganizationLevel: null,
        fdPlateNum: null,
        fdVehicleBarcode: null,
        fdVehicleCategoryName: null,
        fdVehicleType: null,
        fdControlTypeName: null,
        fdFuelTypeName: null,
        fdBrandModel: null,
        fdManufacturer: null,
        fdAxles: null,
        fdEmiStand: null,
        fdLoadQuality: null,
        fdVehicleVolume: null,
        fdCargoLength: null,
        fdCargoWidth: null,
        fdCargoHeight: null,
        fdEnergyConsumptionUnit: null,
        fdEnergyConsumptionQty: null,
        fdMaximumDrivingDistance: null,
        fdEngineNum: null,
        fdVehicleIdentifyCode: null,
        fdGmrq: null,
        fdRegistDate: null,
        fdReleaseDate: null,
        fdAnnualReviewDate: null,
        fdCompulsoryInsuranceDate: null,
        fdCommercialInsuranceDate: null,
        fdCargoInsuranceDate: null,
        fdOrganizationalRelationship: null,
        fdAffiliatedUnit: null,
        fdAffiliatedUnitContact: null,
        fdAffiliatedUnitphone: null,
        fdManageUnit: null,
        fdManagementUnitContact: null,
        fdPhone: null,
        fdRegistraPaper: null,
        fdVehiclePhoto: null,
        fdRemark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleCurrent(row) {
      if (row) {
        this.selectedRows = row;
      }
    },
    handleRowDbClick(row) {
      if (row) {
        this.selectedRows = row;
        this.$emit('onSelected', this.selectedRows);
        this.showFlag = false;
      }
    },
    // 单选选中数据
    handleRowChange(row) {
      if (row) {
        this.selectedRows = row;
      }
    },
    /** 提交按钮 */
    confirmSelect() {
      if (this.selectedItemId == null || this.selectedItemId == 0) {
        this.$notify({
          title: '提示',
          type: 'warning',
          message: '请至少选择一条数据!'
        });
        return;
      }
      this.$emit('onSelected', this.selectedRows);
      this.showFlag = false;
    },
  }
};
</script>
<style lang="scss" scoped>
::v-deep .cell .el-input__inner {
  border: none;
}
</style>

